<template>
  <page-lr class="page-pollution-situation page-city-forecast">
      <div class="list" slot="content-left">
        <el-image 
          :style="{width: 'auto', height:domHeight+'px'}"
          :src="list[searchForm.index]" 
          :z-index="3000"
          :lazy="true"
          :preview-src-list="list">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </div>
        <el-form size="small" :model="searchForm" label-width="90px" slot="content-right">
          <el-form-item label="选择日期：">
            <el-date-picker v-model="searchForm.date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerDate" @change="getList" style="width:100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="类型：">
            <el-button v-for="(item,index) in initData.types" :key="index" size="small" :type="searchForm.index == index ? 'primary' : 'default'" @click="searchForm.index = index">
              {{ item.title }}
            </el-button>
          </el-form-item>
        </el-form>
  </page-lr>
</template>
<script>
import {city} from '@/config/env';
export default {
  data() {
    return {
      loading: true,
      searchForm:{
        date: '',
        index: 0,
      },
      initData:{
        types: [
        { title: '5天气象', key: '5daygram' },
        { title: '5天气象（融合）', key: '5daygram_allinone' },
        { title: '垂直气象', key: 'verticallayer' },
        { title: '多模型（3天）', key: 'multimodel_3day' },
        { title: '多模型（7天）', key: 'multimodel_7day' },
        { title: '多模型对比', key: 'multimodel_ensemble' },
        { title: '季度预报', key: 'seasonal_forecast' },
        ]
      },
      pickerDate:{
        disabledDate:(time) => {
          const current = new Date().getTime();
          const start = new Date('2023-01-01').getTime();
          return time.getTime() > current || time.getTime() < start;
        }
      },
      list:[],
      domHeight: null,
    }
  },
  created() {
    this.domHeight = document.body.clientHeight - 64 - 40 - 48*2 - 20;
    this.searchForm.date = this.$moment().format('YYYY-MM-DD');
    this.getList();
  },
  methods: {
    getList(){
      let str0 = this.$moment(this.searchForm.date).format('YYYY/MM/DD');
      let arr = this.searchForm.date.split('-');
      this.list = this.initData.types.map(item => {        
        return `/pic/meteoblue/${str0}/${city.substring(0,2)}_${item.key}_${arr.join('')}.png`;
      });
    }
  }
}
</script>